<template>
  <!-- components: Message -->
  <teleport to="#message">
    <div
      class = "alert message-info fixed-top w-100 mx-auto d-flex justify-content-between"
      v-bind:class="classObject"
      v-if="isVisible"
    >
      <span>{{message}}</span>
      <button
        type = "button" class = "btn-close" aria-label="Close"
        v-on:click.prevent="hide"
      ></button>
    </div>
  </teleport>
</template>

<script lang = "ts">
import { defineComponent, PropType, ref } from 'vue'
// 导入 useDOMCreate
import useDOMCreate from '@/hooks/useDOMCreate'

export type MessageType = 'success' | 'error' | 'default'

// 对setup函数进行封装，返回options的对象
export default defineComponent({
  // 页面名称
  name: 'Message',
  // 传递数据
  props: {
    message: String,
    type: {
      type: String as PropType<MessageType>,
      default: 'default'
    }
  },

  // 发出 自定义事件
  emits: ['close-message'],

  // 组合式api入口
  setup (props, context) {
    useDOMCreate('message')
    const isVisible = ref(true)
    const classObject = {
      'alert-success': props.type === 'success',
      'alert-danger': props.type === 'error',
      'alert-primary': props.type === 'default'
    }
    const hide = () => {
      isVisible.value = false
      context.emit('close-message', true)
    }
    return {
      isVisible,
      classObject,
      hide
    }
  }
})
</script>

<style lang="css" scoped>
.message-info{
  margin-top: 1px;
  max-width: 1000px;
}
</style>
